<template>
  <div>
    <OAMain title="个人考勤">
      <el-card style="text-align: right">
        <el-button type="primary" @click="onShowDialog"><el-icon>
            <Promotion />
          </el-icon>申请请假</el-button>
      </el-card>
      <el-card>
        <el-table :data="absents" stripe style="width: 100%">
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="absent_type.name" label="类型" />
          <el-table-column prop="request_content" label="请假事由" />
          <el-table-column label="申请时间">
            <template #default="scope">
              {{ timeFormatter.stringFromDateTime(scope.row.create_time) }}
            </template>
          </el-table-column>
          <el-table-column prop="start_time" label="开始时间" />
          <el-table-column prop="end_time" label="结束时间" />
          <el-table-column label="审批领导">
            {{ responder_str }}
          </el-table-column>
          <el-table-column prop="response_content" label="审批意见" />
          <el-table-column label="审核状态">
            <template #default="scope">
              <el-tag type="success" v-if="scope.row.status == 2">通过</el-tag>
              <el-tag type="info" v-else-if="scope.row.status == 1">待审核</el-tag>
              <el-tag type="danger" v-else>拒绝</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <template #footer>
          <OAPagination :total="pagination.total" v-model="pagination.page" />
        </template>
      </el-card>
    </OAMain>

    <OADialog title="申请请假" v-model="dialoVisible" @submit="onSubmitForm">
      <el-form :model="form" :rules="rules" ref="RefForm">
        <el-form-item label="标题" :label-width="formLabelWidth" prop="title">
          <el-input v-model="form.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="请假类型" :label-width="formLabelWidth" prop="absent_type_id">
          <el-select v-model="form.absent_type_id" placeholder="请选择请假类型">
            <el-option v-for="item in absent_types" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请假时间" :label-width="formLabelWidth" prop="date_range">
          <el-date-picker v-model="form.date_range" type="daterange" unlink-panels range-separator="到"
            start-placeholder="起始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="审批人" :label-width="formLabelWidth">
          <el-input :value="responder_str" readonly disabled autocomplete="off" />
        </el-form-item>
        <el-form-item label="请假事由" :label-width="formLabelWidth" prop="request_content">
          <el-input type="textarea" v-model="form.request_content" autocomplete="off" />
        </el-form-item>
      </el-form>
    </OADialog>
  </div>
</template>

<script setup name="MyAbsent">
import { ref, reactive, onMounted, computed, watch } from "vue";
import absentHttp from "@/api/absentHttp";
import { ElMessage } from "element-plus";
import timeFormatter from "@/utils/timeFormatter";
import OAMain from "@/components/OAMain.vue";
import OAPagination from "@/components/OAPagination.vue";
import OADialog from "@/components/OADialog.vue";

let dialoVisible = ref(false);
let formLabelWidth = "100px";
let RefForm = ref();
let form = reactive({
  title: "",
  absent_type_id: null,
  date_range: [],
  request_content: "",
});
let responder = reactive({
  email: "",
  realname: "",
});

let responder_str = computed(() => {
  if (responder.email) {
    return "[" + responder.email + "]" + responder.realname;
  } else return "无审批人";
});

let rules = {
  title: [{ required: true, message: "请输入标题！", trigger: "blur" }],
  absent_type_id: [
    { required: true, message: "请选择请假类型！", trigger: "change" },
  ],
  date_range: [
    { required: true, message: "请选择请假时间！", trigger: "blur" },
  ],
  request_content: [
    { required: true, message: "请输入请假理由！", trigger: "blur" },
  ],
};

let absent_types = ref([]);
let absents = ref([]);

const onShowDialog = () => {
  form.title = "";
  form.absent_type_id = null;
  form.date_range = [];
  form.request_content = "";
  dialoVisible.value = true;
};

onMounted(async () => {
  try {
    // 获取请假类型列表
    let absent_types_data = await absentHttp.getAbsentTypes();
    absent_types.value = absent_types_data;
    // 获取审批人
    let responder_data = await absentHttp.getResponder();
    Object.assign(responder, responder_data);
    // 获取我的请假列表
    requestAbsents(1);
  } catch (detail) {
    ElMessage.error(detail);
  }
});

const onSubmitForm = () => {
  RefForm.value.validate(async (valid) => {
    if (valid) {
      let data = {
        title: form.title,
        absent_type_id: form.absent_type_id,
        start_time: form.date_range[0],
        end_time: form.date_range[1],
        request_content: form.request_content,
      };
      try {
        let absent = await absentHttp.applyAbsent(data);
        absents.value.unshift(absent);

        ElMessage.success("提交成功");
      } catch (detail) {
        ElMessage.error(detail);
      }
    }
  });
  dialoVisible.value = false;
};

let pagination = reactive({
  total: 0,
  page: 1,
});

const requestAbsents = async (page) => {
  try {
    let absent_data = await absentHttp.getMyAbsents(page);
    pagination.total = absent_data.count;
    absents.value = absent_data.results;
  } catch (detail) {
    ElMessage.error(detail);
  }
};

watch(
  () => pagination.page,
  (value) => {
    requestAbsents(value);
  }
);
</script>

<style scoped></style>
